<template>
	<el-affix :offset="150" position="top" class="affix">
		<div class="box" @click="isCustomer = !isCustomer">
			<svg-icon icon-class="customer" size="2rem"></svg-icon>
		</div>
	</el-affix>
	<ChatBox @close="getClose" v-show="isCustomer"></ChatBox>
</template>
<script setup lang="ts">
import ChatBox from './ChatBox.vue';
const isCustomer = ref(false)

const getClose = (value: any) => {
	isCustomer.value = value
}
</script>
<style lang="scss" scoped>
.el-affix {
	position: fixed;
	bottom: 24px;
	right: 24px;

	/* 固定在右侧 */
	z-index: 100;

	/* 设置层级，确保不会被其他元素遮挡 */
}

.box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: #07B175;
	border-radius: 50%;
	&:hover {
		background-color: rgb(35 255 178);

	}
}
</style>
